<template>
  <div style="height: 80vh;">
    <el-row>
      <el-col :span="24" >

        <el-card style="height: 75vh;">
          <template v-slot:header>
            <div class="clearfix">
              <span>个人信息</span>
            </div>
          </template>

          <div>
            <div class="text-center">
              <userAvatar />
            </div>

            <div class="my-span">
              <span>昵称:{{userStore.name}}</span>
            </div>

            <div>
              <el-form ref="pwdRef" :model="user" :rules="rules" label-width="80px" >
                <el-form-item label="旧密码" prop="oldPassword">
                  <el-input v-model="user.oldPassword" placeholder="请输入旧密码" type="password" show-password />
                </el-form-item>
                <el-form-item label="新密码" prop="newPassword">
                  <el-input v-model="user.newPassword" placeholder="请输入新密码" type="password" show-password />
                </el-form-item>
                <el-form-item label="确认密码" prop="confirmPassword">
                  <el-input v-model="user.confirmPassword" placeholder="请确认新密码" type="password" show-password/>
                </el-form-item>
              </el-form>
            </div>

            <div style="display: flex;justify-content: center;margin-top: 100px">
              <el-button type="primary" @click="submit">保存</el-button>
              <el-button type="danger" @click="close">关闭</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>


<script setup >
import UserAvatar from "@/components/login/userAvatar.vue";
import {getCurrentInstance, reactive, ref} from "vue";
import {updateUserPwd} from "@/api/userInfo.js";
import router from "@/router/index.js";
import useUserStore from "@/stores/user.js"
const userStore = useUserStore();
const { proxy } = getCurrentInstance();

const equalToPassword = (rule, value, callback) => {
  if (user.newPassword !== value) {
    callback(new Error("两次输入的密码不一致"));
  } else {
    callback();
  }
};


const rules = ref({
  oldPassword: [{ required: true, message: "旧密码不能为空", trigger: "blur" }],
  newPassword: [{ required: true, message: "新密码不能为空", trigger: "blur" }, { min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" }, { pattern: /^[^<>"'|\\]+$/, message: "不能包含非法字符：< > \" ' \\\ |", trigger: "blur" }],
  confirmPassword: [{ required: true, message: "确认密码不能为空", trigger: "blur" }, { required: true, validator: equalToPassword, trigger: "blur" }]
});

const user = reactive({
  oldPassword: undefined,
  newPassword: undefined,
  confirmPassword: undefined
});

/** 提交按钮 */
function submit() {
  proxy.$refs.pwdRef.validate(valid => {
    if (valid) {
      updateUserPwd(user.oldPassword, user.newPassword).then(response => {
        proxy.$modal.msgSuccess(response.data.msg);
      });
    }
    user.confirmPassword = undefined
    user.newPassword = undefined
    user.oldPassword = undefined
  });
}

/** 关闭按钮 */
function close() {
  router.push("/")
}

</script>
<style scoped>
.clearfix {
  text-align: center;
  &:after {
    visibility: hidden;

    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
  }
}
.text-center {
  text-align: center
}
.my-span{
  font-size: 13px;
  color: #9499a0;
  margin: 20px 0;
  display: flex;
  justify-content: center;
}

</style>